<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-1.10.1.min.js"></script>
    <style>
        .active{
            color:#0f0;
            font-size: 50px;
        }
        .two{
            transition: all 1s;
        }
    </style>
</head>
<body>
    <h3 id="title"  demo="wh2107-daydayup" class="one demo" >jQuery 学习 </h3>
    <button class="btn">点击触发</button>
    <ul class="list">
        <li class="one first">item_01</li>
        <li class="two">item_02</li>
        <li class="three">
            item_03 
            <a class="nav1">hello - 2107</a>
            <a class="nav2">hello - 2109</a>
            <a class="nav3">hello - 2111</a>
            <a class="nav4">hello - 2113</a>

        </li>
        <li>item_04</li>
        <li>item_05</li>
        <li>item_06</li>
        <li>item_07</li>
        <li>item_08 <span> hello </span></li>
        <li>item_09</li>
        <li class="last">item_10</li>
    </ul>
    <input type="text" class="inp">

    <script>

        // $(".list li").mouseover(function(){
        //     $(this).css({background:'purple',fontSize:'60px'})
        // })

        // $(".btn").click(function(){
        //     console.log("YOu  Click Me")
        // })

        // $(".btn").on("click",function(e){
        //     console.log($(this).text())
        //     console.log(e)
        //     e.preventDefault();  // 阻止浏览器的默认事件
        // })

        // $(".list").find(".two").hover(function(){
        //     // 进入
        //     $(this).css({background:'purple',fontSize:'60px'})
        // },function(){
        //     // 离开
        //     $(this).css({background:'#fff',fontSize:'16px'})
        // })

        // $(".list").find(".two").mouseenter(function(){
        //     // 进入
        //     $(this).css({background:'purple',fontSize:'60px'})
        // }).mouseleave(function(){
        //     $(this).css({background:'#fff',fontSize:'16px'})
        // })

        // on   addEventListener
        // off  removeEventListener
        // bind  
        // unbind 

        // 直接绑定事件类型
        // $(".list li").click(function(){
        //     console.log($(this).index())
        // })

        // on 绑定事件  
        // // 监听事件    
        // function fn1(){
        //     console.log($(this).index())
        // }
        // $(".list li").on("click",fn1)


        // function fn2(){
        //     console.log($(this).html())
        // }
        // $(".list li").on("click",fn2)

        // // dblclick 双击
        // $(".list li").on("dblclick",function(){
        //     $(this).css({background:'purple',fontSize:'60px'})
        // })

        // // off 解绑
        // // $(".list li").off()
        // // $(".list li").off("**")
        // // $(".list li").off("dblclick")
        // $(".list li").off('click',fn1)   // 移除对应的事件 

        // bind  
        // unbind 

        // $(".inp").input(function(e){
        //     console.log($(this).val())
        // })

        // $(".inp").on('input',function(e){
        //     console.log($(this).val())
        // })

        // $(".inp").bind("blur",function(){
        //     $(this).css({border:"1px solid red"});
        // })

        // $(".inp").unbind("blur");    


        // $(".inp").bind("keydown",function(){
        //     console.log("2107")
        //     $(this).css({border:"1px solid red"});
        // })


        // $(".inp").on("keydown",function(){
        //     console.log("2107")
        //     $(this).css({border:"1px solid red"});
        // })
        // $(".inp").keydown(function(e){
        //     console.log(e.keyCode)
        //     console.log("2107")
        //     $(this).css({border:"1px solid red"});
        // })

        // 绑定回车事件 
        // $(document).keydown(function(e){
        //     console.log(e.keyCode)
        //     if(e.keyCode==13){
        //         console.log("开始登录")
        //     }
        // })


        // 事件委托  (基于事件冒泡 把子元素的事件委托给父元素   由父元素代替执行 )   delegate
        // 给未来元素绑定事件  
        // 给大量的列表数据绑定事件  


        // parent.on(eventType,childnode,fn)
        // parent.delegate(childnode,eventType,fn)


        // $(".list").on("click",'.last' ,function(){
        //     console.log($(this).html())
        // })

        // $(".list").on("click",'li' ,function(){
        //     console.log($(this).html())
        // })


        $(".list").delegate("li",'click' ,function(){
            console.log($(this).html())
            console.log($(this).index())
        })

    </script>
</body>
</html>